<template>
  <div class="wapper">
    <div class="box1">
      <span>用户注册</span>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item  prop="name">
          <el-input v-model.number="ruleForm.name" prefix-icon="el-icon-user" placeholder="请输入账号"></el-input>
        </el-form-item>

        <el-form-item  prop="pwd">
          <el-input type="password" v-model="ruleForm.pwd" autocomplete="off" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
          <router-link to="Login">有账号去登录</router-link>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
import "../api/user/UserApi";
import UserApi from "../api/user/UserApi";

      var checkName = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("用户名不能为空"));
      }else{
         if(value.length < 2){
          return callback(new Error("用户名长度要超过1位"));
        }
        callback();
      }
    };
    var validatePwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if(value.length < 3){
          return callback(new Error("密码长度要超过2位"));
        }
        callback();
      }
    };
export default {
  name: "Regist",
  data() {
    return {
      ruleForm: {
        name: '',
        pwd: ''
      },
      rules: {
        name: [{ validator: checkName, trigger: "blur" }],
        pwd: [{ validator: validatePwd, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
            UserApi.userRegist(this.ruleForm.name, this.ruleForm.pwd).then((res) => {
        console.log(res.data);
        if (res.data.code == 1) {
          // 注册成功提示
          this.$message.success(res.data.message);
          // 注册成功跳转登录页面
          this.$router.push({
            name: "Login",
          });
          return;
        }
        // 注册失败提示
        this.$message.error(res.data.message);
        this.load = false;
      });
        } else {
          this.$message.error("请安要求输入注册信息")
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.wapper {
  height: 100vh;
  overflow: hidden;
  background-image: linear-gradient(to right bottom, #552a50, #6681c5, #49d226);
}
.box1 {
  width: 360px;
  height: 300px;
  background: rgba(255, 255, 255, 0.2);
  /* 自决父相*/
  position: relative;
  /* 定位要使用下面的 */
  left: 50%;
  top: 50%;
  /* 位移自己宽度高度的一半 */
  transform: translate(-50%, -50%);
}
 span {
  position: absolute;
    left: 127px;
    top: 24px;
    color: rgba(255, 255, 255, 0.95);
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
form {
    width: 332px;
    top: 75px;
    left: -44px;
    position: absolute;
}
.el-input {
  width: 250px;
}
.el-icon-user:before {
    content: "\e6e3";
    position: absolute;
    top: 13px;
    left: 11px;
}
.el-icon-lock:before {
    content: "\e6e5";
    position: absolute;
    top: 13px;
    left: 11px;
}
a:-webkit-any-link {
  /* 路由的link */
  text-decoration: none;
  position: absolute;
  right: -14px;
  bottom: -10px;
}
</style>